import { Component, Vue } from 'vue-property-decorator'
import style from './style.less'
import styles from '@/views/NewApply/NewApply.less'
// import OperationCol from '@/components/OperationCol'
import SealStatus, { issueList } from '@/components/SealStatus'
import { formatStatus, sealTypes } from '@/lib/sealFormat'
import { ElTable } from 'element-ui/types/table'
import { Action } from 'vuex-class'
import TableEmpty from '@/components/tableEmpty'

@Component({})
export default class AuthorizeAppSeal extends Vue {
  private sealType: number[] = []
  private status: number[] = []
  private sealName: string = ''
  private sealCode: string = ''
  private pageIndex: number = 1
  private pageSize: number = 10
  //   private footerHeight: number = 0
  private appId: string = ''
  private sealList: any[] = []
  private total: number = 0
  private loading: boolean = false

  @Action('project/queryManageSealProjectAuthorizeSeal')
  private queryManageSealProjectAuthorizeSeal!: any
  protected render(h: any) {
    return (
      <div class="p10">
        <div
          class={{
            [styles.query]: true,
            custom: true,
            [style.query]: true,
          }}
        >
          <span class={[styles.part]}>
            <span class={styles.part}>
              <span>印章名称</span>
              <el-input v-model={this.sealName} />
            </span>
            <span>印章类别</span>
            <el-select
              v-model={this.sealType}
              multiple
              collapse-tags
              placeholder="默认全部"
            >
              {sealTypes.map((sealType: any, index: number) => (
                <el-option
                  key={sealType.id}
                  label={sealType.value}
                  value={sealType.id}
                />
              ))}
            </el-select>
          </span>
          <span class={styles.part}>
            <span>印章编码</span>
            <el-input v-model={this.sealCode} />
          </span>
          <span class={styles.part}>
            <span>印章状态</span>
            <el-select
              v-model={this.status}
              multiple
              collapse-tags
              placeholder="默认全部"
            >
              {issueList
                .filter(sealType => sealType.key !== 3)
                .map((sealType: any, index: number) => (
                  <el-option
                    key={sealType.key}
                    label={sealType.text}
                    value={sealType.key}
                  />
                ))}
            </el-select>
          </span>

          <span class={[styles.part, style.right]}>
            <el-button
              plain
              class="min color-blue"
              loading={this.loading}
              onClick={this.query}
            >
              搜索
            </el-button>
            <el-button plain class="min color-gray" onClick={this.reset}>
              重置
            </el-button>
          </span>
        </div>
        <el-table
          data={this.sealList}
          style="width: 100%"
          v-loading={this.loading}
          ref="table"
        >
          <TableEmpty
            v-show={!this.loading}
            slot="empty"
            msg="当前查询条件下暂无已授权印章"
            url={require('@/assets/seal-empty.svg')}
          />
          <el-table-column
            prop="sealCode"
            label="印章编码"
            min-width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="sealName"
            label="印章名称"
            min-width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="sealType"
            label="印章类别"
            min-width="80"
            show-overflow-tooltip
            {...{
              scopedSlots: {
                default: (scope: any) => {
                  return formatStatus(sealTypes, scope.row.sealType)
                },
              },
            }}
          />
          <el-table-column
            prop="organizeName"
            label="用章机构名称"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            prop="endTime"
            label="到期时间"
            show-overflow-tooltip
          />
          <el-table-column
            prop="sealStatus"
            label="状态"
            min-width="100"
            {...{
              scopedSlots: {
                default: (scope: any) => {
                  return <SealStatus issue status={scope.row.sealStatus} />
                },
              },
            }}
          />
        </el-table>
        {this.sealList && this.sealList.length > 0 && (
          <el-pagination
            class={{ [styles.pagination]: true }}
            onSize-change={this.handleSizeChange}
            onCurrent-change={this.handleCurrentChange}
            current-page={this.pageIndex}
            page-sizes={[10, 20, 30]}
            page-size={this.pageSize}
            layout="total, sizes, prev, pager, next, jumper"
            total={this.total}
            pager-count={5}
          />
        )}
      </div>
    )
  }

  handleSizeChange(val: number) {
    this.pageIndex = 1
    this.pageSize = val
    this.queryList()
  }

  handleCurrentChange(val: number) {
    this.pageIndex = val
    this.queryList()
  }

  async queryList() {
    this.loading = true
    await this.queryManageSealProjectAuthorizeSeal({
      projectId: this.appId,
      sealCode: this.sealCode,
      sealTypes: this.sealType,
      sealStatuses: this.status,
      sealName: this.sealName,
      pageIndex: this.pageIndex,
      pageNumber: this.pageSize,
    })
      .then((res: any) => {
        this.sealList = (res || {}).list || []
        this.total = res.total || 0
      })
      .catch(() => {})
    this.loading = false
    const table = this.$refs.table as ElTable
    table.doLayout()
  }
  query() {
    this.pageIndex = 1
    this.queryList()
  }

  reset() {
    this.sealCode = ''
    this.sealName = ''
    this.sealType = []
    this.status = []
    this.query()
  }

  mounted() {
    this.appId = (this.$route.query.id as string) || ''
    if (this.appId) {
      this.query()
    }
  }
}
